<template>
    <div class="class_template">
        <div class="header">
            <img :src="detail.cover_url" alt="">
        </div>
        <div class="title">
            <span></span>
            <p>{{detail.desc}}</p>
        </div>
        <div class="content">
            <div class="info-logo">
                <div class="top"><img src="../images/class-template/2.png" alt=""></div>
                <div class="bottom"><span></span>
                    <p class="gradient">{{detail.c_name}}</p><span></span></div>
            </div>
            <div class="info-list">
                <ul>
                        <router-link :to="{path:'/product_details',query:{ id:item.goods_id }}" v-for='(item,key) in list' tag='li' :key='key'>
                        <img :src="item.cover_url" alt="">
                        <p>{{item.title}}</p>
                        <span></span>
                        <strong>{{item.price}}</strong>
                    </router-link>
                    <div class="clearfix"></div>
                </ul>
            </div>
        </div>
        <div class="footer">
            <p>暂无更多</p>
        </div>
    </div>
</template>
<script typy="text/ecmascript-6">
    export default {
        data () {
            return {
                shop_id: '',
                detail: [],
                list: []
            }
        },
        created (){
            const that = this;
            that.shop_id = that.$route.query.id
            const url = that.getUrl('classify');
            that.$http.get(url, {params: {c_id: that.shop_id}}).then(res => {
                if (res.data.code === 0) {
                    that.detail = res.data.data.detail;
                    that.list = res.data.data.list;
                } else {
                    that.$messagebox('提示', res.data.errMsg);
                    return false
                }

            }, err => {
            })


        }

    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../../lib/less/variable";
    @import "../../lib/less/normalize";

    .class_template {
        width: 100%;
        .header {
            width: 100%;
            .h(200);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .title {
            width: 100%;
            .mb(5);
            span {
                display: inline-block;
                .w(40);
                .h(1);
                .ml(5);
                .mr(5);
                border: 2px solid #0F7ADA;
            }
            p {
                box-sizing: border-box;
                .padding(5, 10);
                .fs(14)
            }
        }
        .content {
            width: 100%;
            background: #fff;
            .info-logo {
                width: 100%;
                .top {
                    text-align: center;
                    .pt(10);
                    box-sizing: border-box;
                    img {
                        .w(140);
                        .h(15)
                    }
                }
                .bottom {
                    text-align: center;
                    span {
                        display: inline-block;
                        .w(100);
                        .h(1);
                        background: #0991DB;
                    }
                    p {
                        display: inline-block;
                        .padding(0, 10);
                        color: #Fff;
                        .fs(16);
                        .w(100);
                        .h(30);
                        .lh(30);
                        .ml(15);
                        .mr(15);
                    }
                }
            }
            .info-list {
                width: 100%;
                .pt(30);
                ul {
                    li {
                        width: 50%;
                        float: left;
                        box-sizing: border-box;
                        .padding(5, 5);
                        text-align: center;
                        img {
                            width: 100%;
                        }
                        p {
                            /*控制标签文字一行显示*/
                            display: block; /*内联对象需加*/
                            word-break: keep-all; /* 不换行 */
                            white-space: nowrap; /* 不换行 */
                            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
                            text-overflow: ellipsis; /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/
                            .fs(14);
                        }
                        span {
                            display: inline-block;
                            width: 100%;
                            .h(1);
                            border: 1px solid #ccc;
                        }
                        strong:before {
                            content: "￥";
                            color: #0F7ADA;
                        }
                        strong {
                            color: #0F7ADA;
                            .fs(16)
                        }

                    }
                    li:nth-child(odd) {
                        .pl(10)
                    }
                    li:nth-child(even) {
                        .pr(10)
                    }

                }
            }
        }
        /*footer暂无更多样式*/
        .footer {
            .pb(60);
            .pt(20);
            background: #fff;
            text-align: center;
            .fs(16);
            color: #ccc;
        }
    }
</style>
